<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>专辑库 - QQ音乐</title>
  <link rel="stylesheet" href="styles/music.css">
</head>
<body>
  <header>
    <div class="header-inner">
      <img src="imgs/qqmusic.png">
    </div>
  </header>
  <div class="page">
    <div class="title">歌单推荐</div>
    <div class="kinds">
      <ul>
        <li class="li1">为你推荐</li>
        <li>运动</li>
        <li>网络歌曲</li>
        <li>思念</li>
        <li>官方歌单</li>
        <li>情歌</li>
      </ul>
    </div>
    <div class="content">
      <div class="card">
        <div class="image-container">
        <!-- 主图片 -->
        <img src="imgs/Jay/叶惠美.jpeg" alt="示例图片" class="main-image">
        <!-- 播放按钮图片 - 路径已移到HTML中 -->
        <img src="imgs/cover_play.png" alt="播放" class="play-button-img">
        </div>
        <div class="name">周杰伦</div>
        <div class="num">播放量：666w</div>
      </div>
      <div class="card">
        <div class="image-container">
        <!-- 主图片 -->
        <img src="imgs/Jay/叶惠美.jpeg" alt="示例图片" class="main-image">
        <!-- 播放按钮图片 - 路径已移到HTML中 -->
        <img src="imgs/cover_play.png" alt="播放" class="play-button-img">
        </div>
        <div class="name">周杰伦</div>
        <div class="num">播放量：666w</div>
      </div>
      <div class="card">
        <div class="image-container">
        <!-- 主图片 -->
        <img src="imgs/Jay/叶惠美.jpeg" alt="示例图片" class="main-image">
        <!-- 播放按钮图片 - 路径已移到HTML中 -->
        <img src="imgs/cover_play.png" alt="播放" class="play-button-img">
        </div>
        <div class="name">周杰伦</div>
        <div class="num">播放量：666w</div>
      </div>
      <div class="card">
        <div class="image-container">
        <!-- 主图片 -->
        <img src="imgs/Jay/叶惠美.jpeg" alt="示例图片" class="main-image">
        <!-- 播放按钮图片 - 路径已移到HTML中 -->
        <img src="imgs/cover_play.png" alt="播放" class="play-button-img">
        </div>
        <div class="name">周杰伦</div>
        <div class="num">播放量：666w</div>
      </div>
      <div class="card">
        <div class="image-container">
        <!-- 主图片 -->
        <img src="imgs/Jay/叶惠美.jpeg" alt="示例图片" class="main-image">
        <!-- 播放按钮图片 - 路径已移到HTML中 -->
        <img src="imgs/cover_play.png" alt="播放" class="play-button-img">
        </div>
        <div class="name">周杰伦</div>
        <div class="num">播放量：666w</div>
      </div>
    </div>
  </div>
  <div class="page">
    <div class="title">新歌首发</div>
    <div class="kinds">
      <ul>
        <li class="li1">最新</li>
        <li>内地</li>
        <li>港台</li>
        <li>欧美</li>
        <li>韩国</li>
        <li>日本</li>
      </ul>
    </div>
    <div class="content2">
      <div class="card">
        <div class="image-container">
        <!-- 主图片 -->
        <img src="imgs/Jay/叶惠美.jpeg" alt="示例图片" class="main-image">
        <!-- 播放按钮图片 - 路径已移到HTML中 -->
        <img src="imgs/cover_play.png" alt="播放" class="play-button-img">
        </div>
        <div class="name">
          <p class="WorkName">晴天</p>
          <p class="author">周杰伦</p>
        </div>
        <div class="time">
          05:20
        </div>
      </div>
      <div class="card">
        <div class="image-container">
        <!-- 主图片 -->
        <img src="imgs/Jay/叶惠美.jpeg" alt="示例图片" class="main-image">
        <!-- 播放按钮图片 - 路径已移到HTML中 -->
        <img src="imgs/cover_play.png" alt="播放" class="play-button-img">
        </div>
        <div class="name">
          <p class="WorkName">晴天</p>
          <p class="author">周杰伦</p>
        </div>
        <div class="time">
          05:20
        </div>
      </div>
      <div class="card">
        <div class="image-container">
        <!-- 主图片 -->
        <img src="imgs/Jay/叶惠美.jpeg" alt="示例图片" class="main-image">
        <!-- 播放按钮图片 - 路径已移到HTML中 -->
        <img src="imgs/cover_play.png" alt="播放" class="play-button-img">
        </div>
        <div class="name">
          <p class="WorkName">晴天</p>
          <p class="author">周杰伦</p>
        </div>
        <div class="time">
          05:20
        </div>
      </div>
      <div class="card">
        <div class="image-container">
        <!-- 主图片 -->
        <img src="imgs/Jay/叶惠美.jpeg" alt="示例图片" class="main-image">
        <!-- 播放按钮图片 - 路径已移到HTML中 -->
        <img src="imgs/cover_play.png" alt="播放" class="play-button-img">
        </div>
        <div class="name">
          <p class="WorkName">晴天</p>
          <p class="author">周杰伦</p>
        </div>
        <div class="time">
          05:20
        </div>
      </div>
      <div class="card">
        <div class="image-container">
        <!-- 主图片 -->
        <img src="imgs/Jay/叶惠美.jpeg" alt="示例图片" class="main-image">
        <!-- 播放按钮图片 - 路径已移到HTML中 -->
        <img src="imgs/cover_play.png" alt="播放" class="play-button-img">
        </div>
        <div class="name">
          <p class="WorkName">晴天</p>
          <p class="author">周杰伦</p>
        </div>
        <div class="time">
          05:20
        </div>
      </div>
      <div class="card">
        <div class="image-container">
        <!-- 主图片 -->
        <img src="imgs/Jay/叶惠美.jpeg" alt="示例图片" class="main-image">
        <!-- 播放按钮图片 - 路径已移到HTML中 -->
        <img src="imgs/cover_play.png" alt="播放" class="play-button-img">
        </div>
        <div class="name">
          <p class="WorkName">晴天</p>
          <p class="author">周杰伦</p>
        </div>
        <div class="time">
          05:20
        </div>
      </div>
      <div class="card">
        <div class="image-container">
        <!-- 主图片 -->
        <img src="imgs/Jay/叶惠美.jpeg" alt="示例图片" class="main-image">
        <!-- 播放按钮图片 - 路径已移到HTML中 -->
        <img src="imgs/cover_play.png" alt="播放" class="play-button-img">
        </div>
        <div class="name">
          <p class="WorkName">晴天</p>
          <p class="author">周杰伦</p>
        </div>
        <div class="time">
          05:20
        </div>
      </div>
      <div class="card">
        <div class="image-container">
        <!-- 主图片 -->
        <img src="imgs/Jay/叶惠美.jpeg" alt="示例图片" class="main-image">
        <!-- 播放按钮图片 - 路径已移到HTML中 -->
        <img src="imgs/cover_play.png" alt="播放" class="play-button-img">
        </div>
        <div class="name">
          <p class="WorkName">晴天</p>
          <p class="author">周杰伦</p>
        </div>
        <div class="time">
          05:20
        </div>
      </div>
      <div class="card">
        <div class="image-container">
        <!-- 主图片 -->
        <img src="imgs/Jay/叶惠美.jpeg" alt="示例图片" class="main-image">
        <!-- 播放按钮图片 - 路径已移到HTML中 -->
        <img src="imgs/cover_play.png" alt="播放" class="play-button-img">
        </div>
        <div class="name">
          <p class="WorkName">晴天</p>
          <p class="author">周杰伦</p>
        </div>
        <div class="time">
          05:20
        </div>
      </div>
    </div>
  </div>
  <div class="page">
    <div class="title">MV</div>
    <div class="kinds">
      <ul>
        <li class="li1">精选</li>
        <li>内地</li>
        <li>韩国</li>
        <li>港台</li>
        <li>欧美</li>
        <li>日本</li>
      </ul>
    </div>
    <div class="content3">
      <div class="card">
        <div class="image-container">
        <!-- 主图片 -->
        <img src="imgs/桌面背景.jpg" alt="示例图片" class="main-image">
        <!-- 播放按钮图片 - 路径已移到HTML中 -->
        <img src="imgs/cover_play.png" alt="播放" class="play-button-img">
        </div>
        <div class="name1">探寻诗和远方</div>
        <div class="name2">归虚梦演</div>
        <div class="num3">
          <img src="imgs/icon_listen.png" alt="">
          <h4>8.8万</h4>
        </div>
      </div>
      
      <div class="card">
        <div class="image-container">
        <!-- 主图片 -->
        <img src="imgs/桌面背景.jpg" alt="示例图片" class="main-image">
        <!-- 播放按钮图片 - 路径已移到HTML中 -->
        <img src="imgs/cover_play.png" alt="播放" class="play-button-img">
        </div>
        <div class="name1">探寻诗和远方</div>
        <div class="name2">归虚梦演</div>
        <div class="num3">
          <img src="imgs/icon_listen.png" alt="">
          <h4>8.8万</h4>
        </div>
      </div>
      <div class="card">
        <div class="image-container">
        <!-- 主图片 -->
        <img src="imgs/桌面背景.jpg" alt="示例图片" class="main-image">
        <!-- 播放按钮图片 - 路径已移到HTML中 -->
        <img src="imgs/cover_play.png" alt="播放" class="play-button-img">
        </div>
        <div class="name1">探寻诗和远方</div>
        <div class="name2">归虚梦演</div>
        <div class="num3">
          <img src="imgs/icon_listen.png" alt="">
          <h4>8.8万</h4>
        </div>
      </div>
      <div class="card">
        <div class="image-container">
        <!-- 主图片 -->
        <img src="imgs/桌面背景.jpg" alt="示例图片" class="main-image">
        <!-- 播放按钮图片 - 路径已移到HTML中 -->
        <img src="imgs/cover_play.png" alt="播放" class="play-button-img">
        </div>
        <div class="name1">探寻诗和远方</div>
        <div class="name2">归虚梦演</div>
        <div class="num3">
          <img src="imgs/icon_listen.png" alt="">
          <h4>8.8万</h4>
        </div>
      </div>
      <div class="card">
        <div class="image-container">
        <!-- 主图片 -->
        <img src="imgs/桌面背景.jpg" alt="示例图片" class="main-image">
        <!-- 播放按钮图片 - 路径已移到HTML中 -->
        <img src="imgs/cover_play.png" alt="播放" class="play-button-img">
        </div>
        <div class="name1">探寻诗和远方</div>
        <div class="name2">归虚梦演</div>
        <div class="num3">
          <img src="imgs/icon_listen.png" alt="">
          <h4>8.8万</h4>
        </div>
      </div>
      <div class="card">
        <div class="image-container">
        <!-- 主图片 -->
        <img src="imgs/桌面背景.jpg" alt="示例图片" class="main-image">
        <!-- 播放按钮图片 - 路径已移到HTML中 -->
        <img src="imgs/cover_play.png" alt="播放" class="play-button-img">
        </div>
        <div class="name1">探寻诗和远方</div>
        <div class="name2">归虚梦演</div>
        <div class="num3">
          <img src="imgs/icon_listen.png" alt="">
          <h4>8.8万</h4>
        </div>
      </div>
      <div class="card">
        <div class="image-container">
        <!-- 主图片 -->
        <img src="imgs/桌面背景.jpg" alt="示例图片" class="main-image">
        <!-- 播放按钮图片 - 路径已移到HTML中 -->
        <img src="imgs/cover_play.png" alt="播放" class="play-button-img">
        </div>
        <div class="name1">探寻诗和远方</div>
        <div class="name2">归虚梦演</div>
        <div class="num3">
          <img src="imgs/icon_listen.png" alt="">
          <h4>8.8万</h4>
        </div>
      </div>
      <div class="card">
        <div class="image-container">
        <!-- 主图片 -->
        <img src="imgs/桌面背景.jpg" alt="示例图片" class="main-image">
        <!-- 播放按钮图片 - 路径已移到HTML中 -->
        <img src="imgs/cover_play.png" alt="播放" class="play-button-img">
        </div>
        <div class="name1">探寻诗和远方</div>
        <div class="name2">归虚梦演</div>
        <div class="num3">
          <img src="imgs/icon_listen.png" alt="">
          <h4>8.8万</h4>
        </div>
      </div>
      <div class="card">
        <div class="image-container">
        <!-- 主图片 -->
        <img src="imgs/桌面背景.jpg" alt="示例图片" class="main-image">
        <!-- 播放按钮图片 - 路径已移到HTML中 -->
        <img src="imgs/cover_play.png" alt="播放" class="play-button-img">
        </div>
        <div class="name1">探寻诗和远方</div>
        <div class="name2">归虚梦演</div>
        <div class="num3">
          <img src="imgs/icon_listen.png" alt="">
          <h4>8.8万</h4>
        </div>
      </div>
      <div class="card">
        <div class="image-container">
        <!-- 主图片 -->
        <img src="imgs/桌面背景.jpg" alt="示例图片" class="main-image">
        <!-- 播放按钮图片 - 路径已移到HTML中 -->
        <img src="imgs/cover_play.png" alt="播放" class="play-button-img">
        </div>
        <div class="name1">探寻诗和远方</div>
        <div class="name2">归虚梦演</div>
        <div class="num3">
          <img src="imgs/icon_listen.png" alt="">
          <h4>8.8万</h4>
        </div>
      </div>
    </div>
  </div>
  <div class="low"></div>
</body>
</html>